<template>
  <VanNavBar
    :title="title"
    :fixed="true"
    :left-arrow="showLeftArrow"
    placeholder
    clickable
    text-light
    @click-left="onBack"
  />
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { rootRouteList } from '@/config/routes';

const route = useRoute();
const router = useRouter();

const title = computed(() => {
  if (route.name) {
    if (route.meta.title) {
      return String(route.meta.title);
    } else {
      return String(route.query.title);
    }
  }
  return undefined;
});

const showLeftArrow = computed(() => {
  if (route.name && rootRouteList.includes(route.name as string)) {
    return false;
  }

  return true;
});

const onBack = (): void => {
  if (window.history.state.back) {
    history.back();
  } else {
    router.replace('/');
  }
};
</script>
<style lang="less" scoped>
:global(.van-nav-bar .van-ellipsis) {
  overflow: visible !important;
}
</style>
